<template>
  <!-- 美敦力Apv线上组件 （主动脉页面）-->
  <div class='tab-custom-1'>
    <!-- 左滑箭头 -->
    <div class='tab-custom-1-leftArrow' v-if='labelList.length > 2' @click='showPrevBanner'>
      <i class='iconfont' :class='{disabled: currBannerIndex <= 1}'>&#xe618;</i>
    </div>
    <div class='tab-custom-1-middle'>
      <ul class='middle-list' :ref='labelBannerRef'>
        <!-- 两个label一组显示 -->
        <li class='middle-item'
            v-for='(item, index) of realLabelList'
            :key='"labelTab" + index'
            :style='{width: bannerWidth + "px"}'>
            <!-- label显示 -->
            <div class='middle-item-label'
                 v-for='(label, labelIndex) of item'
                 :key='"labelItem" + labelIndex'
                 :class='{active: currLabelId === label.labelId}'
                 @click='changeLabel(label.labelId)'>
              <span>{{label.labelName}}</span>
              <img :src='label.labelIcon' v-show='currLabelId === label.labelId'/>
            </div>
        </li>
      </ul>
    </div>
    <!-- 右滑箭头 -->
    <div class='tab-custom-1-rightArrow' v-if='labelList.length > 2' @click='showNextBanner'>
      <i class='iconfont' :class='{disabled: currBannerIndex >= bannerNum}'>&#xe618;</i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabCustom1',
  data () {
    return {
      realLabelList: [],
      currLabelId: '',
      bannerWidth: 0,
      currBannerIndex: 1,
      bannerNum: 0,
      labelBannerRef: 'labelBanner' + new Date().getTime(),
      translateX: 0
    }
  },
  props: {
    labelList: {
      type: Array,
      default () {
        return []
      }
    },
    changedLabelId: {
      type: String,
      default: ''
    }
  },
  watch: {
    changedLabelId (newV, oldV) {
      if (newV) {
        this.currLabelId = newV
      }
    }
  },
  methods: {
    init () {
      this.realLabelList = []
      let labelItemArr = []
      // 将栏目列表转化为，两个栏目一组的新列表
      let total = this.labelList.length
      this.labelList.forEach((item, index) => {
        labelItemArr.push(item)
        if (labelItemArr.length < 2) {
          // 如果是最后一个栏目
          if (index === total - 1) {
            this.realLabelList.push(labelItemArr)
          }
        } else {
          this.realLabelList.push(labelItemArr)
          labelItemArr = []
        }
      })
      this.currLabelId = ''
      if (this.changedLabelId) {
        this.currLabelId = this.changedLabelId
      } else if (this.realLabelList[0] && this.realLabelList[0][0]) {
        this.currLabelId = this.realLabelList[0][0].labelId
      }
      // 如果栏目的个数超过两个，需要显示轮播按钮
      this.$nextTick(() => {
        this.bannerWidth = document.querySelector('.tab-custom-1-middle').offsetWidth
        if (this.labelList.length > 2) {
          this.initListBanner()
        }
      })
    },
    changeLabel (labelId) {
      this.currLabelId = labelId
      this.$emit('change', this.currLabelId)
    },
    initListBanner () {
      this.bannerNum = this.realLabelList.length
      this.bannerBox = this.$refs[this.labelBannerRef]
      this.bannerBox.style.width = this.bannerWidth * this.bannerNum + 'px'
      this.currBannerIndex = 1
    },
    showPrevBanner () {
      if (this.currBannerIndex > 1) {
        this.currBannerIndex--
        this.translateX += this.bannerWidth
        this.bannerBox.style.transform = `translateX(${this.translateX}px)`
      }
    },
    showNextBanner () {
      if (this.currBannerIndex < this.bannerNum) {
        this.currBannerIndex++
        this.translateX -= this.bannerWidth
        this.bannerBox.style.transform = `translateX(${this.translateX}px)`
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.tab-custom-1
  height 42px !important
  border-radius:20px;
  overflow hidden
  box-shadow:0px 5px 10px 0px rgba(164,177,181,0.12);
  padding 4px
  background #fff
  border 1px solid rgba(0,133,202,0.5);
  display flex
  .tab-custom-1-leftArrow, .tab-custom-1-rightArrow
    flex none
    width 30px
    line-height 32px
    text-align center
    .iconfont
      display inline-block
      color rgba(0,133,202,0.5)
      &.disabled
        color #eee
  .tab-custom-1-leftArrow
    .iconfont
      transform rotate(180deg)
  .tab-custom-1-middle
    flex 1
    overflow hidden
    .middle-list
      display flex
      transition transform ease 0.3s
      .middle-item
        flex none
        display inline-block
        display flex
        .middle-item-label
          width calc(50% - 8px)
          border-radius 16px
          background #ffffff
          color rgba(32, 33, 37, 0.35)
          line-height 32px
          text-align center
          font-size 0
          &:first-child
            margin-right 16px
          &.active
            color #ffffff
            border-radius:16px;
            background linear-gradient(270deg,rgba(1,168,226,1) 0%,rgba(0,133,202,1) 100%);
          span
            display inline-block
            font-size 13px
            vertical-align middle
          img
            margin-left 4px
            display inline-block
            height 13px
            vertical-align middle

</style>
